<!--
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->

<div id="stack-versions">
  <div class="clearfix">
    <ol class="breadcrumb pull-left">
      <li class="active">Versions</li>
    </ol>
    <div class="pull-right top-margin-4">
      <a href="#/stackVersions/create" class="btn btn-primary">
        <span class="glyphicon glyphicon-plus"></span>
        Register Version
      </a>
    </div>
  </div>
  <hr/>
  <table class="table table-striped table-hover">
    <thead>
    <tr>
      <th class="col-medium">
        <label>Name</label>
        <input type="text" class="form-control" ng-change="resetPagination()" ng-model="filter.version" placeholder="Any">
      </th>
      <th class="col-small">
        <label>Cluster</label>
        <select class="form-control"
                ng-change="resetPagination()"
                ng-model="filter.cluster.current"
                ng-options="item.label for item in filter.cluster.options"
          ></select>
      </th>
      <th></th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="repo in repos">
      <td class="col-medium">
        <a href="#/stackVersions/{{repo.stack_name}}/{{repo.repository_version}}/edit">{{repo.display_name}}</a>
      </td>
      <td class="col-small">
        <a href="/#/main/admin/stack/versions" ng-show="repo.cluster">
          {{repo.cluster}}
        </a>
        <span ng-show="!repo.cluster">
          None
        </span>
      </td>
      <td class="verison-label-row">
        <div ng-show="repo.status == 'current'">
          <span class="label {{'status-' + repo.status}}">Current:&nbsp;{{repo.currentHosts}}/{{repo.totalHosts}}</span>
        </div>
        <div ng-show="repo.status == 'installed'">
          <span class="label {{'status-' + repo.status}}">Installed:&nbsp;{{repo.installedHosts}}/{{repo.totalHosts}}</span>
        </div>
        <div ng-show="!repo.cluster">
          <div class="btn-group display-inline-block" dropdown is-open="viewsdropdown.isopen" ng-mouseover="viewsdropdown.isopen=true" ng-mouseout="viewsdropdown.isopen=false" ng-init="viewsdropdown.isopen=false">
            <a class="btn dropdown-toggle">
              <span>Install on...</span>
            </a>
            <ul class="dropdown-menu" ng-show="viewsdropdown.isopen">
              <li ng-repeat="cluster in dropDownClusters">
                <a href="javascript:void(null)" ng-click="goToCluster()">
                    <span>{{cluster.Clusters.cluster_name}}</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </td>
    </tr>
    </tbody>
  </table>
  <div class="alert alert-info col-sm-12" ng-show="!repos.length">
    No version to display.
  </div>
  <div class="col-sm-12 table-bar">
    <div class="pull-left filtered-info">
      <span>{{tableInfo.showed}} of {{tableInfo.total}} versions showing - </span>
      <a href ng-click="clearFilters()">clear filters</a>
    </div>
    <div class="pull-right left-margin">
      <pagination class="paginator"
                  total-items="pagination.totalRepos"
                  max-size="pagination.maxVisiblePages"
                  items-per-page="pagination.itemsPerPage"
                  ng-model="pagination.currentPage"
                  ng-change="pageChanged()"
        ></pagination>
    </div>
    <div class="pull-right">
      <select class="form-control"
              ng-model="pagination.itemsPerPage"
              ng-options="item for item in [10, 25, 50, 100]"
              ng-change="resetPagination()"
        ></select>
    </div>
  </div>
</div>
